<template>
	<view class="all">
		<!-- 线索量变化图表 -->		
		<echartsStackCon :echartsData="chartDataOne">
<!-- 		<model-picker :defaultRegion="[0, 0]"  @getRegion="handleGetRegion">
				<view class="all_brand">
					{{ makeName == '全部' ? '全部品牌' : makeName }}
					 <image src="@/static/images/polygonDropDown.png" mode="aspectFill"></image>
					<u-icon name="arrow-down"  size="16" style="margin-left:10rpx"></u-icon>
				</view>
			</model-picker>  -->
		</echartsStackCon>
		<!-- 战败量图表 -->
		<echartsGroupCon :echartsData="chartDataTwo" />

	</view>
</template>

<script>
	import echartsStackCon from '../echartsStackCon.vue';
	import echartsGroupCon from '../echartsGroupCon.vue';
	import modelPicker from "../modelPicker/index.vue"
	export default {
		data() {
			return {
				user_info: '',
				makeName: '全部'
			}
		},
		props: {
			chartDataOne: {
				type: Object,
				default: {}
			},
			chartDataTwo: {
				type: Object,
				default: {}
			}
		},
		watch: {
			chartDataOne(newValue) {
			
				this.chartDataOne = newValue
			},
			chartDataTwo(newValue) {
				this.chartDataTwo = newValue
			}
		},
		components: {
		echartsStackCon,
		echartsGroupCon,
			modelPicker
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.userInfo = uni.getStorageSync('user_info')
			},

			handleGetRegion(e){
				this.makeName = e && e['1'].makeName || ''
				this.$emit('upPage', e)
			}
		}
	}
</script>

<style scoped lang="scss">
		.all {
			// min-height: 90vh;
			background-color: #FFFFFF;
		}
	
		.all_total,
		.deal_total {
			display: flex;
			margin: 5rpx 0 0 40rpx;
	
			.spot {
				width: 12rpx;
				height: 12rpx;
				background-color: #6DA5FF;
				border-radius: 50%;
				margin: 15rpx 15rpx 30rpx 0;
			}
	
			.all_number_title {
				font-size: 28rpx;
				color: #FFFFFF;
			}
	
			.number {
				font-size: 28rpx;
				font-weight: bold;
				padding-left: 15rpx;
				color: #FFFFFF;
			}
		}
	
		.progress_total,
		.defeat_total {
			display: flex;
			padding-left: 220rpx;
			margin-top: 5rpx;
	
			.spot {
				width: 12rpx;
				height: 12rpx;
				background-color: #6DA5FF;
				border-radius: 50%;
				margin: 15rpx 15rpx 0 0;
			}
	
			.all_number_title {
				font-size: 28rpx;
				color: #FFFFFF;
			}
	
			.number {
				font-size: 28rpx;
				font-weight: bold;
				padding-left: 15rpx;
				color: #FFFFFF;
			}
		}
	
	
		.clueQuantity_change {
			width: 100%;
			height: 560rpx;
			background-color: #FFFFFF;
			border-top: 12rpx solid #F5F6FA;
	
			.clueQuantity_change_title {
				font-size: 32rpx;
				color: #43425D;
				height: 80rpx;
				background: #F5F6FA;
				line-height: 80rpx;
				padding: 0 30rpx;
			}
	
			.all_brand {
				font-size: 26rpx;
				color: #42435D;
				margin: 30rpx 0 0 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				position: relative;
				opacity: 0.7;
			}
	
			.clueQuantity_change_type {
				display: flex;
				margin-right: 20rpx;
				justify-content: flex-end;
				margin: 15rpx 30rpx 20rpx 0;
			}
	
			.change_one {
				display: flex;
				margin-right: 40rpx;
	
				.change_model {
					width: 42rpx;
					height: 12rpx;
					background-color: #E26131;
					margin-top: 10rpx;
					margin-right: 8rpx;
				}
	
				text {
					font-size: 12rpx;
					font-weight: 400;
					color: #43425D;
				}
			}
	
			.change_two {
				display: flex;
				margin-right: 40rpx;
	
				.change_model_two {
					width: 42rpx;
					height: 12rpx;
					background-color: #D8AA2B;
					margin-top: 10rpx;
					margin-right: 8rpx;
				}
	
				text {
					font-size: 12rpx;
					font-weight: 400;
					color: #43425D;
				}
			}
	
			.change_three {
				display: flex;
				margin-right: 40rpx;
	
				.change_model_three {
					width: 42rpx;
					height: 12rpx;
					background-color: #69C893;
					margin-top: 10rpx;
					margin-right: 8rpx;
				}
	
				text {
					font-size: 12rpx;
					font-weight: 400;
					color: #43425D;
				}
			}
	
			.change_four {
				display: flex;
				margin-right: 30rpx;
	
				.change_model_four {
					width: 42rpx;
					height: 12rpx;
					background-color: #75B9CC;
					margin-top: 10rpx;
					margin-right: 8rpx;
				}
	
				text {
					font-size: 12rpx;
					font-weight: 400;
					color: #43425D;
				}
			}
	
			.change_five {
				display: flex;
	
				.change_model_five {
					width: 42rpx;
					height: 12rpx;
					background-color: #5A92DB;
					margin-top: 10rpx;
					margin-right: 8rpx;
				}
	
				text {
					font-size: 12rpx;
					font-weight: 400;
					color: #43425D;
				}
			}
		}

</style>
